<template>
	<div class="video-page" id="videoPage" ref="videoPage">
		<video
			id="myVideo"
			ref="myVideo"
			class="video-js vjs-big-play-centered vjs-fluid"
			@error="errors($event)"
		>
			<!-- poster="@/assets/video/video-poster.jpg" -->
			<source type="video/mp4">
			<span>您的浏览器不支持该视频播放，请升级您的浏览器！</span>
		</video>
		<!-- <div class="close">
			<el-button class="close_btn" icon="el-icon-close" circle></el-button>
		</div> -->
		<!-- <pull-point></pull-point> -->
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getConfigList } from '@/api';

export default {
	// components: {
	// 	PullPoint: () => import('./PullPoint.vue')
	// },
	data() {
		return {
			// isPlay: true
			Video: "",
			videoUrl: "",
			intervalTime: 0,
			myPlayer: null
		}
	},
	computed: {
		...mapGetters(["deviceMode", 'devicePdMode'])
	},
	async mounted() {
		console.log('video');
		if(sessionStorage.getItem('isPc') == 'true'){
			this.init()
			this.$nextTick(() => {
				window.addEventListener('resize', () => {
					this.init()
				})
			})
			this.getVideoUrl();
		}
	},
	beforeDestroy() {
		window.removeEventListener('reisze', () => {
			this.init()
		});
	},
	methods: {
		init() {
			this.$el.style ? this.$el.style.height = `${window.innerHeight}px` : null;
			this.$refs.myVideo ? this.$refs.myVideo.style.height = `${window.innerHeight}px` : null;
		},
		getVideoUrl() {
			if(!sessionStorage.getItem('videoConfigInfo')) {
				getConfigList({configType: 3}).then((res) => {
					if(res.code == 200) {
						const info = res.data.filter(item => item.configKey == 'business_video_status' || item.configKey == 'business_video_interval_time' || item.configKey == 'business_video_url');
						sessionStorage.setItem('videoConfigInfo', JSON.stringify(info));
						this.setVideoInfo(info);
					}
				}).catch((err) => {
					
				});
			} else {
				const info = JSON.parse(sessionStorage.getItem('videoConfigInfo'));
				this.setVideoInfo(info);
			}
		},
		setVideoInfo(val) {
			// 开关 -> 间隔时间 -> 视频地址
			const videoSwitch = val.find(item => item.configKey == 'business_video_status');
			if(videoSwitch.configValue == 'true') {
				// 官网宣传视频间隔时间
				this.intervalTime = val.find(item => item.configKey == 'business_video_interval_time').configValue;

				const videoInfo = val.find(item => item.configKey == 'business_video_url');
				this.videoUrl = videoInfo.configValue;

				this.initVideo();
			}
		},
		initVideo () {
			console.log('myPlayer-', this.myPlayer);
			this.$refs.videoPage.classList.remove("fade-in");
			if(this.myPlayer) {
				// dispose() 该方法会重置videojs的内部状态并移除dom 从播放器中删除所有事件侦听器。删除播放器的DOM元素，所以再次初始化的时候需要我们重新创建标签
				this.myPlayer.dispose();
				console.log('是否销毁-', this.myPlayer.isDisposed());
				this.myPlayer = null;
				let container = document.getElementById('videoPage');
				container.innerHTML = `<video id="myVideo" ref="myVideo" class="video-js vjs-big-play-centered vjs-fluid"><source type="video/mp4"><span>您的浏览器不支持该视频播放，请升级您的浏览器！</span></video>`;
			}
			this.$nextTick(() => {
				let videoDom = document.querySelector("#myVideo");
				videoDom.style.width = "100%";
				videoDom.style.height = "100%";
				videoDom.style.objectFit = "cover"; // 确保视频不会变形
				videoDom.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

				const _this = this;

				_this.myPlayer = this.$video(videoDom, {
					controls: false,
					autoplay: true,
					preload: "auto", // 立即下载视频资源（如果浏览器支持的话），有些手机浏览器节省带宽，会禁止提前下载
					loop: false,
					muted: true, // 静音
					// fluid: true,
					width: "800px",
					height: "400px",
					notSupportedMessage: "此视频暂时无法播放,请刷新后再试!",
					sources: {
						src: this.videoUrl,
						type: "video/mp4",
					}
				}, function() {
					this.on("play", () => {
						// console.log('play');
					});
					this.on("playing", () => {
						// console.log('playing');
					});
					this.on("pause", () => {
						// console.log('pause');
					});
					this.on("ended", () => {
						// console.log('ended');
						// this.dispose();
						// _this.myPlayer = null;
						_this.$refs.videoPage.classList.add("fade-in");
						setTimeout(() => {
							_this.$emit('videoEnded', _this.myPlayer);
						}, 1650);
					});
					this.on('click', function() {
						// console.log('click!');
						// this.dispose();
						// _this.myPlayer = null;
						_this.$refs.videoPage.classList.add("fade-in");
						setTimeout(() => {
							_this.$emit('videoEnded', _this.myPlayer);
						}, 1650);
					}),
					this.on('touchend', () => {
						// console.log('click!');
						// this.dispose();
						// _this.myPlayer = null;
						_this.$refs.videoPage.classList.add("fade-in");
						setTimeout(() => {
							_this.$emit('videoEnded', _this.myPlayer);
						}, 1650);
					})
				});
			});
		},
		errors(e) {
			if (!window.sessionStorage.getItem("videoFlag")) {
				this.$alert("视频加载错误，请刷新重试或者联系系统管理员！", "温馨提示", {
					confirmButtonText: "确认",
					callback: (action) => {
						window.location.reload();
					},
				});
				window.sessionStorage.setItem("videoFlag", "1");
				return;
			}
			document.querySelector("#myVideo").children[0].src = "";
		},
	},
    // mounted() {
    //     this.$nextTick(() => {
    //         this.$el.style.height = `${window.innerHeight * 1 - 1}px`
    //         this.$refs.videojs.style.height = `${window.innerHeight}px`
    //         let _this = this

    //         this.$video(this.$refs.videojs, {
    //             controls: false,
    //             autoplay: true,
    //             preload: "auto",
    //             loop: true,
    //             muted: true,
    //             preload: true,
    //             sources: {
    //                 src: videoPath,
    //                 type: "video/mp4"
    //             }
    //         }, function onPlayerReady() {
    //             this.on('pause', function() { _this.isPlay = false })
    //             this.on('play', function() { _this.isPlay = true })
    //             _this.$refs.videojs.addEventListener('click', () => {
    //                 _this.isPlay ? this.pause() : this.play()
    //             })
    //         })
    //     })
    // }
}
</script>

<style lang="scss" scoped>
.app-media{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	// background-color: rgba(0, 0, 0, 0.5);
}

video {
	width: 100%;
	height: 100%;
	object-fit: fill;
	background-color: transparent;
}

.video-js .vjs-big-play-button {
	font-size: 2.5em !important;
	line-height: 2.3em !important;
	height: 2.5em !important;
	width: 2.5em !important;
	-webkit-border-radius: 2.5em !important;
	-moz-border-radius: 2.5em !important;
	border-radius: 2.5em !important;
	background-color: #73859f;
	background-color: rgba(115, 133, 159, 0.5) !important;
	border-width: 0.15em !important;
	margin-top: -1.25em !important;
	margin-left: -1.75em !important;
}
.vjs-big-play-button .vjs-icon-placeholder {
	font-size: 1.63em !important;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
	display: block !important;
}

.fade-in {
	// transition: fadenum 2s ease;
	animation: fadenum 2s 1;
	animation-fill-mode: forwards;
}

@keyframes fadenum{
	0% {opacity: 1;}
	5% {opacity: 0.5;}
	100% {opacity: 0;}
}

.close{
	position: absolute;
	top: 50%;
	left: 0;
	width: 50%;
	height: 50%;
    background-color: transparent;
	// pointer-events: none;
	z-index: 2002;
	&:hover .close_btn{
		display: block;  // 设置父元素hover时子元素的样式
	}
}
.close_btn{
	display: none;
	position: absolute;
	top: 50px;
	right: 50px;
	border: 0;
	font-size: 2.5em !important;
	background-color: rgba(115, 133, 159, 0.5) !important;
	border-width: 0.15em !important;
	width: 30px;
	height: 30px;
	background-color: transparent;
	float: left; // 让按钮浮动在父元素上
}
</style>